<template>
  <div class="boundaryCard">
    <div class="boundaryCard__header">
      <div :class="{'boundaryCard__header__item':true,active:activeIndex === 1}" @click="activeClick(1)">
        本级边界调整列表
      </div>
      <div :class="{'boundaryCard__header__item':true,active:activeIndex === 2}" @click="activeClick(2)" v-if="departInfo.areaLevel===1 || departInfo.areaLevel===2">
        本级审核列表
      </div>
      <div :class="{'boundaryCard__header__item':true,active:activeIndex === 3}" @click="activeClick(3)" v-if=" departInfo.areaLevel===2">
        本级上报列表
      </div>
<!--      <div :class="{'boundaryCard__header__item':true,active:activeIndex === 2}" @click="activeIndex = 2">-->
<!--        下级边界调整列表-->
<!--      </div>-->
    </div>
    <div class="boundaryCard__box" v-if="activeIndex === 1" >
      <same-level :workId="workId" @add="levelAdd" @edit="edit" ref="sameLevel" @success="marginSuccess"/>
    </div>
    <div class="boundaryCard__box" v-if="activeIndex === 2" >
      <same-approval :workId="workId"/>
    </div>
    <div class="boundaryCard__box" v-if="activeIndex === 3" >
      <same-report :workId="workId"/>
    </div>
    <margin-modal ref="marginModal" :polygon="polygon" :vectorId="vectorId" @afreshMap="afreshMap" @success="marginSuccess" :is-edit="isEdit" :is-add="isAdd"/>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import MarginModal from "@/views/region/components/MarginModal.vue";
import SameLevel from "@/views/region/components/SameLevel.vue";
import SameApproval from "@/views/region/components/SameApproval.vue";
import SameReport from "@/views/region/components/SameReport.vue";
import {Getter} from "vuex-class";
@Component({
  components: {MarginModal,SameLevel,SameApproval,SameReport}
})
export default class BoundaryCard extends Vue {
  @Getter('departInfo') private departInfo!: any;
  private status = '0';
  private activeIndex= 0;
  private polygon = '';
  private vectorId='';
  private workId = '';
  private areaData;
  private visible = false;
  private isEdit = false;
  private isAdd = false;
  private get changeStatus(){
    return function(status,changeStatus){
      return status + changeStatus;
    }
  }
  $refs!: {
    marginModal: HTMLFormElement,
    sameLevel: HTMLFormElement,
    sameApproval: HTMLFormElement,
    sameReport: HTMLFormElement,
  };

  activeClick(index){
    if(this.activeIndex === index){
      this.activeIndex = 0;
      return;
    }
    this.activeIndex = index;
  }
  toChange(){
    this.$emit('toChange')
    this.$refs.marginModal.show()
  }

  levelAdd(){
    this.isAdd = true
    this.$emit('toChange')
    this.$refs.marginModal.show()
  }

  edit(row:any){
    this.isEdit = true
    this.$emit('toChange')
    this.$refs.marginModal.show()
    this.$refs.marginModal.formData = {...row}
  }

  marginSuccess(){
    this.$refs.sameLevel && this.$refs.sameLevel.fetchData()
  }

  workChangeWatch(workId){
    if(!workId){
      return;
    }
    this.activeIndex = 1
    this.workId = workId;
  }

  afreshMap(){
    this.$emit('afreshMap')
  }

}
</script>
<style lang="scss" scoped>
.boundaryCard {
  border-radius: 8px;
  background: #ffffff;
  padding: 0 14px;
  min-width: 400px;
  overflow: auto;
  border: 1px dashed #009688;
  .boundaryCard__header{
    display: flex;
    align-items: center;
    padding: 14px 0 10px 0;
    gap: 28px;
    .boundaryCard__header__item{
      cursor: pointer;
      font-size: 13px;
      color: #8d8d8d;
      padding-bottom: 4px;
      &.active{
        color: #333333;
        font-weight: bold;
        border-bottom: 1px solid #006400;
      }
    }
  }
  .boundaryCard__box{
    padding: 10px 0;
    height: 500px;
    overflow: auto;
  }
}
.areaInfo{
  font-size: 13px;
  color: #333333;
  border-radius: 6px;
  background: #f3f3f3;
  padding: 14px;
  .el-row{
    margin-top: 10px;
  }
}
</style>
